<!DOCTYPE html>
<html>
<head>
    <title>监测报警</title>
    <link rel="stylesheet" href="__STATIC__/js/element-plus-214/element_plus.css">
    <script src="__STATIC__/js/element-plus-214/vue@next.js"></script>
    <script src="__STATIC__/js/element-plus-214/element_plus.js"></script>
    <script src="__STATIC__/js/element-plus-214/zh-cn.js"></script>
    <script type="text/javascript" src="__STATIC__/js/js/jquery-3.3.1.min.js"></script>
    <style>
        [v-cloak] {
            display: none !important;
        }
        .el-cascader-panel{
            height: 300px !important;
        }
    </style>
</head>
<body>
<!-- layui-tab开始 -->
<div class="layui-tab" id="app" v-cloak>
    <!-- 表格内容开始 -->
    <div class="layui-card" style="margin-top:20px">
        <el-descriptions class="margin-top" :column="1" border>
            <el-descriptions-item>
                <template #label>监测时间</template>
                {{ detail.monitor_time }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>报警类型</template>
                {{ detail.alarm_type }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>报警地点</template>
                {{ detail.alarm_address }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>报警次数</template>
                {{ detail.alarm_num }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>过火面积</template>
                {{ detail.burned_area }}公顷
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>起火原因</template>
                {{ detail.disaster_cause }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>火情等级</template>
                {{ detail.alarm_level }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>监测设备</template>
                {{ detail.monitor_device }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>监控视频</template>
                <el-link type="primary" @click="viewData">查看</el-link>
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>处理人</template>
                {{ detail.deal_name }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>处理时间</template>
                {{ detail.deal_time }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>处理报告</template>
                {{ detail.deal_report }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>应急预案</template>
                {{ detail.plan }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>应急部门</template>
                {{ detail.team_name }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>应急物资</template>
                暂无
            </el-descriptions-item>
        </el-descriptions>
    </div>

</div>
<script type="text/javascript">
    let id = '{$id}'
    const App = {
        data() {
            return {
                detail:'',
            };
        },
        created: function () {
            this.getDetail()
        },
        methods: {
            //查看监控
            viewData(){
                this.$message({
                    type: 'warning',
                    message: '暂无监控视频',
                })
            },
            //详情
            getDetail() {
                let that = this;
                $.ajax({
                    url: "{:cmf_plugin_url('Alarm://admin_index/getDetail')}",
                    data: {
                        'id':id
                    },
                    dataType: "json",
                    type: "post",
                    success: function (res) {
                        if (res.code === 200) {
                            that.detail = res.data
                        }else{
                            that.$message({
                                type: 'error',
                                message: res.message,
                            })
                        }
                    }
                });
            },
            cancelSub(){
                const index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                parent.layer.close(index); //再执行关闭
            }

        }
    };
    const app = Vue.createApp(App);
    app.use(ElementPlus, {
        locale: ElementPlusLocaleZhCn,
    });
    app.mount("#app");
</script>
</body>
</html>